<template>
  <div class="charts">
    <div v-if="showChartsBtn" class="btn" @click="$emit('btnClick')">
      <img width="26" height="26" src="@/static/img/full-screen.png" />
    </div>
    <line-chart :opention="line" height="100%" width="100%" />
  </div>
</template>

<script>
  import LineChart from "@/views/dashboard/commonTemplate";
  import vModelMixins from "../../../../../utils/mixins/vModelMixins";
  export default {
    name: "charts",
    components: {
      LineChart
    },
    mixins: [vModelMixins],
    props: {
      list: {
        type: Array,
        default: () => []
      },
      showChartsBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        statusOptions: [{
            label: "ddd",
            value: 1
          },
          {
            label: "aaa",
            value: 2
          }
        ],
        line: {}
      };
    },
    watch: {
      list() {
        this.getLine();
      }
    },
    computed: {},
    methods: {
      handleQuery() {
        this.$emit("search", this.form);
      },
      checkRate(val) {
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if(regPos.test(val) || regNeg.test(val)) {
          return true;
        } else {
          return false;
        }
      },
      /** 折线图里面的方法 */
      // 绘制曲线
      getLine() {
        let legendData = [];
        let xAxisData = [];
        let seriesData = [];
        var lastLegendNum = 0;
        var xAxisFlag = true;
        var self = this;
        if (self.list.length) {
          for(var i =0;i<self.list.length;i++){
            var obj = this.list[i];
            if(obj) {
              var name = obj.keywords;
              var gridArr = obj.grid;
              var data = {};
              lastLegendNum = legendData.length;
              for (let key  in gridArr[0]) {
                if (key != "time") {
                  legendData.push(name + "_" + key);
                  data[name + "_" + key] = [];
                }
              }
              var lastGrid = {};
              if (gridArr.length != 0&&xAxisFlag) {
                for (var j = 0; j < gridArr.length; j++) {
                  var grid = gridArr[j];
                  if(self.list.length>1||self.checkAllDataIsNull(grid)) {
                    xAxisData.push(grid.time);
                  }
                }
                if(xAxisData.length>0){
                  xAxisFlag = false;
                }
              }
              for (var j = 0; j < gridArr.length; j++) {
                var grid = gridArr[j];
                if(self.list.length>1||self.checkAllDataIsNull(grid)) {
                  for (let key in grid) {
                    if (key != "time") {
                      if (self.checkRate(grid[key])) {
                        data[name + "_" + key].push({value:grid[key],isValid:true});
                        lastGrid[key] = grid[key];
                      } else {
                        // data[name + "_" + key].push('-');
                        data[name + "_" + key].push({value:lastGrid[key],isValid:false});
                      }
                    }
                  }
                }
              }
              for (var k = 0; k < legendData.length - lastLegendNum; k++) {
                seriesData.push({
                  name: legendData[k + lastLegendNum],
                  type: "line", //这个是展示数据的类型，是柱状图还是折线图，饼状图
                  // stack: legendData[i], // 平滑曲线是stack不能一样，否则会在值的上面叠加
                  showSymbol: true,
                  symbol: "circle",
                  symbolSize: 4, //设定实心点的大小
                  smooth: true, //这个是把线变成曲线
                  hoverAnimation: true,
                  animation: true,
                  data: data[legendData[k+ lastLegendNum]]
                })
              }
            }
          }

          var xAxisDataTemp = [];
          var seriesDataTemp = [];
          for(var i=0;i<xAxisData.length;i++){
            var time = xAxisData[i];
            var timeIsValid = false;
            for(var j =0;j<seriesData.length;j++){
              var dataIsValid = seriesData[j].data[i].isValid;
              if(dataIsValid){
                timeIsValid = true;
              }
            }
            if(timeIsValid){
              xAxisDataTemp.push(time);
              for(var j =0;j<seriesData.length;j++){
                var value = seriesData[j].data[i].value;
                var isvalid = seriesData[j].data[i].isValid;
                if(seriesDataTemp[j] ==null){
                  seriesDataTemp[j] = [] ;
                }
                seriesDataTemp[j].push({value:value,isValid:isvalid});
              }
            }
          }
          for(var i =0;i<seriesData.length;i++){
            seriesData[i].data = seriesDataTemp[i];
          }

          this.line = {
            grid: {
              top: 40,
              left: "3%",
              right: "10%",
              bottom: 5,
              containLabel: true
            },
            legend: {
              orient: "horizontal", //显示方向horizontal横向，vertical纵向
              x: "left", // 'center' | 'left' | {number}, 横向位置
              y: 0, // 'center' | 'bottom' | {number}, 纵向位置
              backgroundColor: "rgb(255, 255, 255)", // 背景颜色
              borderColor: "rgba(255, 255, 255, 0.8)", // 边框颜色
              borderWidth: 0, //边框
              data: legendData
            },
            dataZoom: [{
              type: 'slider',
              xAxisIndex: 0,
              filterMode: 'empty',
              start: 95,
              end: 100,
              lineHeight: 10,
              // handleSize:5,
              bottom: 0,
              labelFormatter:function(value,time){
                return time.split(" ")[0] +"\n"+time.split(" ")[1];
              },
              textStyle:{
                lineHeight: 100,
                fontWeight:"bold",
                color:"red"
              }
            }],
            toolbox: {
              show: true,
              right: 20,
              // y: 50,
              // orient: "vertical",
              //要显示的工具箱内容
              feature: {
                saveAsImage: { //保存为图片
                  show: true
                },
                magicType: { //动态类型切换
                  type: ['bar', 'line']
                }
              }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "line" // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter:function(params){
                var allFalse = true;
                var str = params[0].name+"<br>";
                for(var i =0;i<params.length;i++){
                  var obj = params[i];
                  var val = "";
                  if(obj.data.isValid){
                    val = obj.value;
                    allFalse = false;
                  }else{
                    val = "-";
                  }
                  str += obj.marker+obj.seriesName+"："+val+'<br>';
                }
                if(allFalse){
                  return "此时段无数据!";
                }
                else {
                  return str;
                }
              }
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              axisTick: {
                // 是否显示刻度
                show: false
              },
              data: xAxisDataTemp,
              axisLine: {
                lineStyle: {
                  type: "solid"
                  // color: 'rgb(235, 238, 245)',
                }
              }
            },
            yAxis: {
              name: "mm", // 给y轴加单位
              type: "value",
              boundaryGap: false,
              axisTick: {
                // 是否显示刻度
                show: false,
                default: false
              },
              axisLine: {
                // 是否显示坐标轴对x,y轴有效
                show: false
              },
              splitNumber: 9, // 有多少个刻度
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed"
                }
              }
            },
            calculable: true,
            series: seriesData
          };
        }
      },
      checkAllDataIsNull(grid){
        var flag = false;
        for (let key  in grid) {
          if (key != "time") {
            if(this.checkRate(grid[key])) {
              flag = true;
            }
          }
        }
        return flag;
      },
    },
    created() {},
    mounted() {
      this.getLine();
    }
  };
</script>
<style lang="scss" scoped>
  .charts {
    position: relative;
    background-color: #fff;
    padding: 16px;
    flex-shrink: 0;

    .chart-box {
      height: 100%;
    }

    .btn {
      position: absolute;
      z-index: 99;
      right: 4px;
      top: 4px;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.25);
      font-size: 0;
    }
  }
</style>
